import React, { useState } from 'react';
import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space, Modal } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import request from '../../../http';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const projectTeam = () => {
  const columns = [
    {
      title: '小组名称',
      fixed: 'left',
      dataIndex: 'groupName',
      render: (text: string) => <a>{text}</a>,
    },

    {
      title: '院系',
      width: 100,
      dataIndex: 'profession',
      key: 'xmmc',
      fixed: 'left',
    },
    {
      title: '专业',
      dataIndex: 'faculty',
      key: '1',
      width: 100,
    },
    {
      title: '年级',
      dataIndex: 'grade',
      key: '2',
      width: 100,
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: '3',
      width: 100,
    },
    {
      title: '班主任',
      dataIndex: 'headTeacher',
      key: '4',
      width: 100,
    },
    {
      title: '学员姓名',
      dataIndex: 'name',
      key: '5',
      width: 100,
    },
    {
      title: '学号',
      dataIndex: 'account',
      key: '6',
      width: 100,
    },
    {
      title: '身份证号码',
      dataIndex: 'identity',
      key: '4',
      width: 100,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: '5',
      width: 100,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: '6',
      width: 100,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: '4',
      width: 100,
    },
    {
      title: '项目角色',
      dataIndex: 'role',
      key: '5',
      width: 100,
    },
    {
      title: '设置组长',
      dataIndex: 'groupAdmin',
      key: '6',
      width: 100,
    },
  ];

  //全局
  const [largeAccounnt, setLargeAccount]: any = useState();

  const [selectionType, setSelectionType] = React.useState<
    'checkbox' | 'radio'
  >('checkbox');
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  //Get管理员遍历所有小组
  const [setGroupSelect, setgGroupSelect] = React.useState();
  //Get根据小组id查询小组所有成员
  const [setGroupIdSelect, setgGroupIdSelect] = React.useState();
  //下拉框小组名称接口
  const [Xzmc, setXzmc] = React.useState([{}]);

  return (
    <div>
      <Form {...formItemLayout}>
        <div style={{ marginLeft: '30px', width: '800px', float: 'left' }}>
          <div>
            <div style={{ marginLeft: '8px', float: 'left', width: '300px' }}>
              <Form.Item name="groupName" label="小组名称：">
                <Select placeholder="请选择" allowClear>
                  {Xzmc.map((cNameObj: any) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.id}>
                        {cNameObj.groupName}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>

              <Form.Item name="account" label="学号：">
                <Input placeholder="请输入"></Input>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="name" label="学员姓名：">
                <Input></Input>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '10px' }}
                >
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </div>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '30px' }}
                >
                  <Button type="default" htmlType="submit">
                    重置
                  </Button>
                </div>
              </Form.Item>
            </div>
          </div>

          <div style={{ marginLeft: '30px', width: '1000px', float: 'left' }}>
            <div
              style={{
                marginLeft: '0px',
                float: 'left',
                height: '50px',
                width: '99%',
                backgroundColor: '#ebf6f7 ',
              }}
            >
              <div style={{ marginTop: '8px' }}>
                <Button type="text">已选择XX项</Button>
                <Button type="link">清空</Button>
              </div>
            </div>
            <div style={{ marginLeft: '8px' }}>
              <div>
                <Table
                  columns={columns}
                  //dataSource={}
                  scroll={{ x: 1300 }}
                />
              </div>
            </div>
          </div>

          <div style={{ clear: 'left', width: '1000px' }}></div>
        </div>
      </Form>
    </div>
  );
};

export default projectTeam;
